<template>
    <view>
        <view class="main">
            <view class="form noLabel">
                <uni-forms :modelValue="ruleForm" :rules="rules" ref="ruleForm" label-width="0" validateTrigger="blur">
                    <uni-forms-item name="radioType">
                        <view class="radio">
                            <uni-data-checkbox v-model="ruleForm.radioType" :localdata="radioList" @change="radioTypeChange" />
                        </view>
                    </uni-forms-item>
                    <uni-forms-item name="goods_code" v-if="ruleForm.radioType == 1">
                        <view class="li">
                            <view class="fl"><text class="red">*</text>{{$lang('选择商品代码')}}：</view>
                            <view class="fr">
                                <input type="text" v-model="ruleForm.goods_code" :placeholder="$lang('请选择商品代码')">
                                <image src="../../static/images/icon13.png"></image>
                                <view class="hideBox" @click="factoryPurchaserGoodsListFun(1)"></view>
                            </view>
                        </view>
                    </uni-forms-item>
                    <uni-forms-item name="order_name" v-else>
                        <view class="li">
                            <view class="fl"><text class="red">*</text>{{$lang('关联订单号')}}：</view>
                            <view class="fr">
                                <input type="text" v-model="ruleForm.order_name" :placeholder="$lang('请选择订单号')">
                                <image src="../../static/images/icon13.png"></image>
                                <view class="hideBox" @click="factoryPurchaserGoodsOrderListFun(3)"></view>
                            </view>
                        </view>
                    </uni-forms-item>
                    <uni-forms-item name="code">
                        <view class="li">
                            <view class="fl"><text class="red">*</text>{{$lang('采购单编码')}}：</view>
                            <view class="fr">
                                <input type="text" v-model="ruleForm.code" :placeholder="$lang('请输入采购单编码')">
                            </view>
                        </view>
                    </uni-forms-item>
                    <view class="tableBox" v-if="ruleForm.list.length > 0" style="margin-bottom: 22px">
                        <view class="fl"><text class="red">*</text>{{$lang('采购单信息')}}：</view>
                        <view class="fr">
                            <view class="table">
                                <uni-table border :emptyText="$lang('暂无数据')">
                                    <uni-tr class="tableHead">
                                        <uni-th align="center" v-for="(item,index) in tableColumn" :key="index">{{$lang(item.label)}}</uni-th>
                                    </uni-tr>
                                    <uni-tr v-for="(item,index) in ruleForm.list" :key="index">
                                        <uni-td align="center" v-for="(data,dataIndex) in tableColumn" :key="dataIndex">
                                            <text v-if="data.value == 'index'">{{index + 1}}</text>
                                            <view v-else-if="data.value == 'image'">
                                                <image :src="baseUrl + item[data.value]" style="width: 100rpx;height: 100rpx;"></image>
                                            </view>
                                            <view v-else-if="data.value == 'size'">
                                                <uni-forms-item :name="'list.' + index + '.size'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.size" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'num'">
                                                <uni-forms-item :name="'list.' + index + '.num'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.num" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'unit'">
                                                <uni-forms-item :name="'list.' + index + '.unit'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.unit" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'purchase_unit_price_aed'">
                                                <uni-forms-item :name="'list.' + index + '.purchase_unit_price_aed'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.purchase_unit_price_aed" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'all_price_aed'">
                                                <uni-forms-item :name="'list.' + index + '.all_price_aed'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.all_price_aed" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'purchase_unit_price_omr'">
                                                <uni-forms-item :name="'list.' + index + '.purchase_unit_price_omr'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.purchase_unit_price_omr" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'all_price_omr'">
                                                <uni-forms-item :name="'list.' + index + '.all_price_omr'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.all_price_omr" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'volume'">
                                                <uni-forms-item :name="'list.' + index + '.volume'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.volume" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'freight'">
                                                <uni-forms-item :name="'list.' + index + '.freight'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.freight" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'gross_margin'">
                                                <uni-forms-item :name="'list.' + index + '.gross_margin'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.gross_margin" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'system_lowest_selling_price'">
                                                <uni-forms-item :name="'list.' + index + '.system_lowest_selling_price'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.system_lowest_selling_price" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'product_ownership_name'">
                                                <uni-forms-item :name="'list.' + index + '.product_ownership_name'" :rules="rules.required.rules">
                                                    <view style="position: relative">
                                                        <uni-easyinput v-model="item.product_ownership_name" :placeholder="$lang('请选择')" />
                                                        <view class="hideBox" @click="productOwnershipOtherFun(2,index)"></view>
                                                    </view>
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'stock'">
                                                <uni-forms-item :name="'list.' + index + '.stock'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.stock" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'last_delivery_time'">
                                                <uni-forms-item :name="'list.' + index + '.last_delivery_time'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.last_delivery_time" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'sales_since_last_arrival'">
                                                <uni-forms-item :name="'list.' + index + '.sales_since_last_arrival'" :rules="rules.required.rules">
                                                    <uni-easyinput v-model="item.sales_since_last_arrival" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <view v-else-if="data.value == 'memo'">
                                                <uni-forms-item :name="'list.' + index + '.memo'">
                                                    <uni-easyinput v-model="item.memo" :placeholder="$lang('请输入')" />
                                                </uni-forms-item>
                                            </view>
                                            <text v-else>{{item[data.value]}}</text>
                                        </uni-td>
                                    </uni-tr>
                                </uni-table>
                            </view>
                        </view>
                    </view>
                    <uni-forms-item name="code" v-if="ruleForm.list.length > 0">
                        <view class="li">
                            <view class="fl"><text class="red">*</text>{{$lang('选择现有供货商')}}：</view>
                            <view class="fr">
                                <input type="text" v-model="ruleForm.supplier_name" disabled>
                            </view>
                        </view>
                    </uni-forms-item>
                    <view class="tableBox" v-if="ruleForm.list.length > 0" style="margin-bottom: 22px">
                        <view class="fr">
                            <view class="table">
                                <uni-table border :emptyText="$lang('暂无数据')">
                                    <uni-tr class="tableHead">
                                        <uni-th align="center" v-for="(item,index) in supplierColumn" :key="index">{{$lang(item.label)}}</uni-th>
                                    </uni-tr>
                                    <uni-tr v-for="(item,index) in supplierData" :key="index">
                                        <uni-td align="center" v-for="(data,dataIndex) in supplierColumn" :key="dataIndex">
                                            <text v-if="data.value == 'index'">{{index + 1}}</text>
                                            <text v-else>{{item[data.value]}}</text>
                                        </uni-td>
                                    </uni-tr>
                                </uni-table>
                            </view>
                        </view>
                    </view>
                    <uni-forms-item name="warehouse_name">
                        <view class="li">
                            <view class="fl"><text class="red">*</text>{{$lang('入库仓库')}}：</view>
                            <view class="fr">
                                <input type="text" v-model="ruleForm.warehouse_name" :placeholder="$lang('请选择入库仓库')">
                                <image src="../../static/images/icon13.png"></image>
                                <view class="hideBox" @click="factoryPurchaserWarehouseListFun(2)"></view>
                            </view>
                        </view>
                    </uni-forms-item>
                    <view class="tableBox">
                        <view class="fl"><text class="red">*</text>{{$lang('附件')}}：</view>
                        <view class="fr">
                            <uni-forms-item name="files">
                                <u-upload
                                        :fileList="ruleForm.files"
                                        @afterRead="afterRead"
                                        @delete="deletePic"
                                        name="1"
                                        multiple
                                        :maxCount="9"
                                >
                                </u-upload>
                            </uni-forms-item>
                        </view>
                    </view>
                </uni-forms>
            </view>
        </view>
        <view class="footerFen"></view>
        <view class="footer">
            <view class="top">
                <view class="fl" @click="$common.back()">{{$lang('取消')}}</view>
                <view class="fr" @click="submit">{{$lang('发起采购审批')}}</view>
            </view>
        </view>
        <u-picker
                :show="pickerShow"
                :columns="pickerColumns"
                @close="pickerShow = false"
                @cancel="pickerShow = false"
                @confirm="pickerConfirm"
                :keyName="keyName"
                closeOnClickOverlay
        ></u-picker>
    </view>
</template>

<script>
    import {
        factoryPurchaserGoodsList,
        factoryPurchaserSupplierList,
        factoryPurchaserWarehouseList,
        factoryPurchaserGoodsOrderList,
        factoryPurchaserAdd
    } from '../../api/api'
    export default {
        data() {
            return {
                baseUrl:'',
                radioList:[
                    { text: this.$lang('样品'), value: 1},
                    { text: this.$lang('关联订单号'), value: 2},
                ],
                ruleForm:{
                    radioType:1,
                    list:[],
                    code:'',
                    files:[]
                },
                rules:{
                    required: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请输入') }
                        ]
                    },
                    goods_code: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请选择商品代码') }
                        ]
                    },
                    order_name: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请选择订单号') }
                        ]
                    },
                    code: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请输入采购单编码') }
                        ]
                    },
                    warehouse_name: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请选择入库仓库') }
                        ]
                    },
                    files: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请上传附件') }
                        ]
                    },
                },
                pickerShow:false,
                pickerColumns:[],
                keyName:'',
                tableColumn:[
                    {label:this.$lang('序号'),value:'index'},
                    {label:this.$lang('一级分类'),value:'category_one_name'},
                    {label:this.$lang('二级分类'),value:'category_two_name'},
                    {label:this.$lang('商品代码'),value:'goods_code'},
                    {label:this.$lang('商品名称'),value:'goods_name'},
                    {label:this.$lang('尺寸(CM)'),value:'size'},
                    {label:this.$lang('图片'),value:'image'},
                    {label:this.$lang('数量'),value:'num'},
                    {label:this.$lang('单位'),value:'unit'},
                    {label:this.$lang('进货单价AED'),value:'purchase_unit_price_aed'},
                    {label:this.$lang('总价AED'),value:'all_price_aed'},
                    {label:this.$lang('进货单价OMR'),value:'purchase_unit_price_omr'},
                    {label:this.$lang('总价OMR'),value:'all_price_omr'},
                    {label:this.$lang('单品体积m3'),value:'volume'},
                    {label:this.$lang('运费均摊OMR'),value:'freight'},
                    {label:this.$lang('毛利率'),value:'gross_margin'},
                    {label:this.$lang('建议标价OMR'),value:'advise_price'},
                    {label:this.$lang('最低售价OMR'),value:'lowest_selling_price'},
                    {label:this.$lang('系统最低售价OMR'),value:'system_lowest_selling_price'},
                    {label:this.$lang('产品属性'),value:'product_attributes'},
                    {label:this.$lang('可销售库存'),value:'stock'},
                    {label:this.$lang('上次到货时间'),value:'last_delivery_time'},
                    {label:this.$lang('上次到货至今销量'),value:'sales_since_last_arrival'},
                    {label:this.$lang('备注'),value:'memo'}
                ],
                supplierColumn:[
                    {label:this.$lang('序号'),value:'index'},
                    {label:this.$lang('供应商名称'),value:'name'},
                    {label:this.$lang('供应商代码'),value:'code'},
                    {label:this.$lang('供应商地址'),value:'address'},
                    {label:this.$lang('供应商银行'),value:'bank'},
                    {label:this.$lang('供应商银行户名'),value:'username'},
                    {label:this.$lang('供应商账号'),value:'account'},
                    {label:this.$lang('联系方式'),value:'contact'},
                ],
                type:'',
                supplierData:[],
                supplierList:[]
            }
        },
        onLoad() {
            this.baseUrl = this.$config.baseUrl;
            uni.setNavigationBarTitle({
                title: this.$lang('新增采购单')
            });
            this.factoryPurchaserSupplierListFun();
        },
        methods: {
            radioTypeChange(){
                this.ruleForm.goods_code = '';
                this.ruleForm.order_name = '';
                this.ruleForm.order_id = '';
            },
            // 删除图片
            deletePic(event) {
                this.ruleForm.files.splice(event.index, 1)
            },
            // 新增图片
            afterRead(event) {
                // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this.ruleForm.files.length
                lists.map((item) => {
                    this.ruleForm.files.push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    this.$common.upLoadImg(lists[i].url).then(result => {
                        let item = this.ruleForm.files[fileListLen]
                        this.ruleForm.files.splice(fileListLen, 1, Object.assign(item, {
                            status: 'success',
                            message: '',
                            url: result.data.url,
                        }))
                        fileListLen++;
                    });
                }
            },
            factoryPurchaserGoodsOrderListFun(type){
                this.pickerColumns = [];
                uni.showLoading({
                    title:'加载中',
                    mask:true
                })
                factoryPurchaserGoodsOrderList().then(res => {
                    uni.hideLoading();
                    if(res.data.length == 0){
                        return uni.showToast({
                            title:this.$lang('订单号暂无数据'),
                            icon:'none'
                        })
                    }
                    this.type = type;
                    this.pickerColumns.push(res.data);
                    this.pickerShow = true;
                    this.keyName = 'order_no';
                })
            },
            factoryPurchaserWarehouseListFun(type){
                this.pickerColumns = [];
                uni.showLoading({
                    title:'加载中',
                    mask:true
                })
                factoryPurchaserWarehouseList().then(res => {
                    uni.hideLoading();
                    if(res.data.length == 0){
                        return uni.showToast({
                            title:this.$lang('入库仓库暂无数据'),
                            icon:'none'
                        })
                    }
                    this.type = type;
                    this.pickerColumns.push(res.data);
                    this.pickerShow = true;
                    this.keyName = 'name';
                })
            },
            factoryPurchaserSupplierListFun(){
                factoryPurchaserSupplierList().then(res => {
                    this.supplierList = res.data;
                })
            },
            factoryPurchaserGoodsListFun(type){
                this.pickerColumns = [];
                uni.showLoading({
                    title:'加载中',
                    mask:true
                });
                factoryPurchaserGoodsList().then(res => {
                    uni.hideLoading();
                    if(res.data.length == 0){
                        return uni.showToast({
                            title:this.$lang('商品代码暂无数据'),
                            icon:'none'
                        })
                    }
                    this.type = type;
                    this.pickerColumns.push(res.data);
                    this.pickerShow = true;
                    this.keyName = 'goods_code';
                })
            },
            submit(){
                this.$refs.ruleForm.validate().then(valid => {
                    let param = {...this.ruleForm};
                    let files = [];
                    if(this.ruleForm.files && this.ruleForm.files.length > 0){
                        this.ruleForm.files.forEach(item => {
                            files.push(item.url);
                        })
                    }
                    param.files = files;
                    param.list.forEach(item => {
                        item.lowest_selling_price_omr = item.lowest_selling_price;
                        item.system_lowest_selling_price_omr = item.system_lowest_selling_price;
                    })
                    factoryPurchaserAdd(param).then(res => {
                        if(res.code == 1){
                            uni.showToast({
                                title:this.$lang('新增成功'),
                                icon:'none'
                            });
                            setTimeout(() => {
                                this.$common.back();
                                uni.$emit('returnData',1);
                            },500)
                        } else{
                            uni.showToast({
                                title:res.msg,
                                icon:'none'
                            })
                        }
                    })
                }).catch(err => {

                })
            },
            pickerConfirm(e){
                if(this.type == 1){
                    this.ruleForm.goods_code = e.value[0].goods_code;
                    this.pickerColumns[0].forEach(item => {
                        if(e.value[0].goods_code == item.goods_code){
                            this.ruleForm.list = [item];
                        }
                        this.supplierList.forEach(data => {
                            if(data.id == item.supplier_id){
                                this.supplierData = [data];
                                this.ruleForm.supplier_id = data.id;
                                this.ruleForm.supplier_name = data.name;
                            }
                        })
                    });
                    this.ruleForm.list.forEach(item => {
                        item.category_one_name = item.category_one.name;
                        item.category_two_name = item.category_two.name;
                        item.product_ownership_name = item.product_ownership_id ? item.product_ownership.name : '';
                        item.last_delivery_time = item.last_delivery_time ? this.$common.formatDate(item.last_delivery_time * 1000) : '';
                    });
                    this.ruleForm.list = JSON.parse(JSON.stringify(this.ruleForm.list));
                }else if(this.type == 2){
                    this.ruleForm.warehouse_id = e.value[0].id;
                    this.ruleForm.warehouse_name = e.value[0].name;
                } else if(this.type == 3){
                    this.ruleForm.order_id = e.value[0].id;
                    this.ruleForm.order_name = e.value[0].order_no;
                    this.ruleForm.list = [];
                    this.pickerColumns[0].forEach(item => {
                        if(item.id == e.value[0].id){
                            if(item.order_item.length > 0){
                                item.order_item.forEach(data => {
                                    factoryPurchaserGoodsList({
                                        goods_code:data.goods_code
                                    }).then(res => {
                                        this.ruleForm.list.push(res.data[0]);
                                        this.ruleForm.list.forEach(item => {
                                            item.category_one_name = item.category_one.name;
                                            item.category_two_name = item.category_two.name;
                                            item.product_ownership_name = item.product_ownership_id ? item.product_ownership.name : '';
                                            item.last_delivery_time = item.last_delivery_time ? this.$common.formatDate(item.last_delivery_time * 1000) : '';
                                        });
                                        this.ruleForm.list = JSON.parse(JSON.stringify(this.ruleForm.list));
                                        this.supplierList.forEach(data2 => {
                                            if(data2.id == res.data[0].supplier_id){
                                                this.supplierData = [data2];
                                                this.ruleForm.supplier_id = data2.id;
                                                this.ruleForm.supplier_name = data2.name;
                                                console.log(this.supplierData);
                                            }
                                        })
                                    })
                                })
                            }
                        }
                    })
                }
                this.pickerShow = false;
            },
        }
    }
</script>

<style lang="scss" scoped>
    .main{
        padding: 60rpx 24rpx 40rpx 24rpx;
        .form{
            .radio{
                /deep/ .checklist-box{
                    .checklist-content{
                        .checklist-text{
                            color: #222;
                            font-size: 32rpx;
                        }
                    }
                    &.is-checked{
                        .radio__inner{
                            border-color: #365aa6;
                            .radio__inner-icon{
                                background-color: #365aa6;
                            }
                        }
                        .checklist-content{
                            .checklist-text{
                                color: #365aa6;
                            }
                        }
                    }
                }
            }
            .li{
                display: flex;
                flex-direction: column;
                .fl{
                    font-size: 32rpx;
                    color: #222;
                }
                .fr{
                    display: flex;
                    align-items: center;
                    position: relative;
                    height: 90rpx;
                    border: 1px solid #747474;
                    padding: 0 33rpx;
                    border-radius: 10rpx;
                    margin-top: 15rpx;
                    input{
                        font-size: 32rpx;
                        color: #222;
                        padding-right: 15rpx;
                        width: 100%;
                    }
                    image{
                        width: 60rpx;
                        height: 60rpx;
                    }
                }
            }
            .tableBox{
                .fl{
                    font-size: 32rpx;
                    color: #222;
                }
                .fr{
                    margin-top: 15rpx;
                }
            }
            .info{
                padding-top: 50rpx;
                .h1{
                    display: flex;
                    align-items: center;
                    font-size: 32rpx;
                    color: #222;
                    &:before{
                        content: '';
                        width: 8rpx;
                        height: 30rpx;
                        border-radius: 8rpx;
                        background: #365aa6;
                        margin-right: 20rpx;
                    }
                }
                .list{
                    padding-left: 25rpx;
                    font-size: 28rpx;
                    line-height: 48rpx;
                    color: #222;
                    margin-top: 18rpx;
                }
            }
        }
    }
    .footerFen{
        height: 179rpx;
    }
    .footer{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 24rpx 24rpx 45rpx 24rpx;
        background: #f5f5f5;
        .top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .fl{
                width: 280rpx;
                height: 90rpx;
                border-radius: 90rpx;
                text-align: center;
                line-height: 90rpx;
                font-size: 36rpx;
                color: #555;
                border: 1px solid #c9c9c9;
                background: #eee;
            }
            .fr{
                width: 400rpx;
                height: 90rpx;
                border-radius: 90rpx;
                text-align: center;
                line-height: 90rpx;
                background: #365aa6;
                color: #fff;
                font-size: 36rpx;
            }
        }
    }
</style>
